<?php
require_once($_SERVER["DOCUMENT_ROOT"] . "/include/config.php");
require_once("include/check.php");
require_once("include/connection_controller.php");
require_once("include/splitter_controller.php");
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
    <script src="js/json.js" type='text/javascript'></script>
    <script src="js/jquery-ui.min.js" type="text/javascript"></script>
    <script src="js/util_script.js" type="text/javascript"></script>
    <script src="js/jquery.editable.js" type="text/javascript"></script>
    <script src="js/raphael-min.js" type="text/javascript"></script>
    <script src="js/connection.js" type='text/javascript'></script>
    <script src='js/jquery.dropdown.js' type='text/javascript'></script>
    <link href='css/dropdown.css' rel='stylesheet' type='text/css'/>
    <link href="css/styles.css" rel="stylesheet" type="text/css"/>
    <link href="css/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script type='text/javascript'>
        var pointId =<?= getParam("id") ?>;
        var cid =   <?= getParam("cid") ?>;
        var isNew =  <?= getParam("new") ?>;
        var canSaveConnection = <?= getParam("canSaveConnection") ?>;
        var isCommonSchema = <?= getParam("isCommonSchema") ?>;

        var seg1 = null, seg2 = null, conId = "";

        var splitters = <?php echo json_encode(SplitterController::GetSplitterTypesArray()); ?>;

        $(document).ready(function () {
            for (var i = 0; i < splitters.length; i++) {
                $("#ddlSplitterType").append("<option value='" + splitters[i].id + "'>" + splitters[i].title + "</option>");
            }
            ddlSplitterType_Change();

            $("button").button();

            initConnections(pointId, cid, true);
            if (isNew || isCommonSchema)
                $("#delete_cid").hide();
            else
                $("#delete_cid").show();

            if(canSaveConnection)
            {
                $("#save_cid").show();
            }
            else
            {
                $("#save_cid").hide();
            }

            $("#delete_cid").click(deleteConnectPoint);
            $("#save_cid").click(saveConnectPoint);

            $("#delete_connection").click(deleteConnection);

            $("#btnAddSplitter").click(ShowModalDialog_AddSplitter);

            $("#divSelectSplitter").dialog({
                autoOpen: false,
                width: "auto",
                height: "auto",
                resizable: false,
                title: "Добавить сплиттер",
                modal: true,
                buttons: {
                    "Добавить": function () {
                        SplitterAdded();
                        $(this).dialog("close");
                    },
                    "Закрыть": function () {
                        $(this).dialog("close");
                    }
                }
            });

            $("#divShowNewConnection").dialog({
                autoOpen: false,
                width: "auto",
                height: "auto",
                title : "Соединение",
                modal: true,
                open: function( event, ui )
                {
                    $("#ddlShowCabelOnSide").val("left");
                },
                buttons: {
                    "Да" : function()
                    {
                        ShowNewConnection($("#ddlShowCabelOnSide").val(), $(this).data("isSplitter"), $(this).data("currentFiberSide"));
                        $(this).dialog("close");
                    },
                    "Нет" : function()
                    {
                        $(this).dialog("close");
                    }
                }
            })

            ResizeConnectionContainerDialog();
        });


        function ddlSplitterType_Change() {
            $("#ddlSplitterType option:selected").each(function () {
                var current = FindSplitterByValue($(this).val());
                if (current != null) {
                    $("#spnInputs").text(current.inputs);
                    $("#spnOutputs").text(current.outputs);
                    $("#spnAttenuation").text(current.attenuation);
                }
            })
        }

        function FindSplitterByValue(value) {
            for (var i = 0; i < splitters.length; i++) {
                if (splitters[i].id == value)
                    return splitters[i];
            }

            return null;
        }

        function ShowModalDialog_AddSplitter() {
            $("#divSelectSplitter").dialog("open");
        }
    </script>
</head>
<body style="font-family: Verdana, sans-serif; font-size: 80%; width: 100%; height: 100%">
<table>
    <tr>
        <td style="width: 500px;">
            <table width="100%" height="100%" id="editor_table">
                <tr id="connection_info" style="display: none; min-height: 40px; height: 40px;">
                    <td colspan="2">
                        <table width="100%" height="100%">
                            <tr>
                                <td><b>Название</b></td>
                                <td><span class="editable_single" id="connect_name"></span></td>
                            </tr>
                            <tr>
                                <td><b>Тип</b></td>
                                <td><span class="editable_single" id="connect_type"></span></td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <div id="editor_window">
                            <div
                                style="width: 500px; height: 400px; border: 1px solid black; position: relative; background-color: #e1ffcc"
                                id="canvas"></div>
                            <p id="editor_notice" style="display: none">
                                <br/>
                                <i>Выберите два кабеля для создания или редактирования соединения между ними, либо выберите уже существующее соединение.</i>
                            </p>
                            <p id="merge_notice" style="display: none">
                                <br/>
                                <i>Выберите два сегмента для создания непрерывного участка кабеля, либо выберите существующее соединение для его удаления. </i>
                            </p>
                        </div>
                    </td>
                </tr>
            </table>
        </td>
        <td id="connection_window" style='display: none;'>
            <span id="connectionHeader">Подробная схема соединения между выбранными сегментами</span>

            <div id="cnvsConnection"></div>
            <button id="btnAddSplitter">Добавить сплиттер</button>
        </td>
    </tr>
    <tr>
        <td colspan="2" style="text-align: right">
            <button id="save_cid">Сохранить</button>
            <button id="delete_cid">Удалить</button>
        </td>
    </tr>
</table>
<div id="divSelectSplitter">
    <table>
        <tr>
            <td>
                <span>Тип сплиттера:</span>
            </td>
            <td>
                <select id="ddlSplitterType" onchange="ddlSplitterType_Change();"></select>
            </td>
        </tr>
        <tr>
            <td>
                <span>Входы:</span>
            </td>
            <td>
                <span id="spnInputs"></span>
            </td>
        </tr>
        <tr>
            <td>
                <span>Выходы:</span>
            </td>
            <td>
                <span id="spnOutputs"></span>
            </td>
        </tr>
    </table>
</div>
<div id="divShowNewConnection">
    <span>Отобразить соединение, в котором участвует волокно данного кабеля?<br /><br /></span>
    <span>Показывать кабель на схеме:</span>
    <select id="ddlShowCabelOnSide">
        <option value="left">слева</option>
        <option value="right">справа</option>
    </select>
</div>
</body>
</html>
